<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="requesrHeader"
          accept=".xlsx, .xls"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :on-exceed="handleExceed"
          :file-list="fileList"
          style="float: right"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">附件上传</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会议信息" name="1" />
      <el-tab-pane label="培训信息" name="2" />
      <el-tab-pane label="事故信息" name="3" />
      <el-tab-pane label="应急管理" name="4" />
      <el-tab-pane label="管理制度" name="5" />
      <div>
        <el-table v-loading="loading" :data="fileData">
          <el-table-column label="时间" align="center" prop="createTime" />
          <el-table-column label="文件名" align="center" prop="fileName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="downloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { delManageList, etManageList, saveEnterManage } from '@/api/informationReport'

export default {
  name: 'Index',
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      requesrHeader: '', // 上传请求头token
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      fileList: [], // 文件列表
      activeName: '1',
      loading: true,
      fileData: [] // 列表数据
    }
  },
  created() {
    this.requesrHeader = { 'Authorization': 'Bearer ' + getToken() }
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const data = {
        type: this.activeName,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      etManageList(data).then(response => {
        this.fileData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleClick(tab, event) {
      this.getList()
      // console.log(tab, event)
      // console.log('activeName', this.activeName)
      // console.log('data', this.data)
    },
    /** 下载文件 */
    downloadFile(data) {
      saveAs(process.env.VUE_APP_RESOURCE_PREFIX + data.path, data.fileName)
    },
    /** 删除 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除文件名为"' + row.fileName + '"的数据项？').then(function() {
        return delManageList(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },

    uploadSuccess(file, fileList) {
      console.log(file, fileList)
      if (file.code === 200) {
        const data = {
          type: this.activeName,
          fileName: fileList.name,
          fileSize: fileList.size,
          fileType: fileList.raw.type,
          // fileUrl: fileList.response.url,
          path: fileList.response.url,
          id: fileList.uid
        }
        // console.log('file, fileList:', file, fileList)
        // console.log('data:', data)
        saveEnterManage(data).then(res => {
          if (res.code === 200) {
            this.$message.success('上传成功')
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    beforeUpload(file, fileList) {
    },
    handleRemove(file, fileList) {
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
      this.$confirm(`确定移除 ${file.name}？`).then(
        () => {
          const index = this.form.serviceFiles.map((item) => item.id).indexOf(file.uid)
          this.form.serviceFiles.splice(index, 1)
        }
      )
    }

  }

}
</script>

<style scoped>
.pagination-container {
  height: 40px;
}
</style>
